<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>
</head>

<body>
    <div id="peHead"></div>
    <div style="padding: 45px 10px 55px 10px;">
        内容添加边距防止遮挡，上 45 px 下 55 px
    </div>
    <div id="peFoot"></div>
</body>
<script>
    // 配置
    layui.config({
        base: "../model/"
    })
    // 导航示例
    layui.use(["jmNav", "dropdown"], function () {
        var jmNav = layui.jmNav;

        var dropdown = layui.dropdown;

        // nav移动头部拓展
        jmNav.peHead({
            id: "peHead", // 容器id
            addClass: "",//可追加class
            left: { //可选 左侧按钮
                name: "左侧按钮",
                text: `<i class="layui-icon layui-icon-left"></i>`, //内容
            },
            center: { //必须
                text: "首页",
            },
            right: { //可选 右侧按钮
                text: `<i class="layui-icon layui-icon-more-vertical"></i>`,
                href: "http://www.baidu.com", // 链接 不填或为空不跳转 可选
            },
            callback: function (dom, data) { //回调
                console.log(dom, data)

                // 可配合下拉菜单使用 等等
                if (data.name == "左侧按钮") {
                    dropdown.render({
                        elem: dom, // 触发事件的 DOM 对象
                        show: true, // 外部事件触发即显示
                        data: [{
                            title: '查看',
                            id: 'detail'
                        }, {
                            title: '删除',
                            id: 'del'
                        }]
                    })
                }

            }
        })

        function dro() { }

        // nav移动底部拓展
        jmNav.peFoot({
            id: "peFoot", // 容器id
            config: [ // 配置
                {
                    id: "1",
                    name: "首页",
                    icon: "layui-icon layui-icon-home",
                },
                {
                    id: "2",
                    name: "首页",
                    href: "", // 链接 不填或为空不跳转
                    icon: "layui-icon layui-icon-home",
                }
            ],
            thisId: "1", //默认选中的id
            addClass: "layui-bg-cyan", //追加class
            callback: function (dom, data) {
                console.log(dom, data);
            }
        });
    })
</script>

</html>